<!--  -->
<template>
  <div id="splitviewIndex" class="flex">
    <div class="adPanel">
      <!-- :stop-propagation="false" -->
      <van-swipe :autoplay="swipeTime" :stop-propagation="false" @change="onChange" lazy-render ref="swipeBox">
        <van-swipe-item v-for="(item, index) in info" :key="item.id" class="van-swipe-item-custom">
          <img v-if="item.adv_type == 1" :src="item.image_url" alt="" draggable="false" @click.stop="onClick($event, item)" />
          <video
            @playing="onPlay"
            @timeupdate="onTimeupdate"
            :loop="isLoop"
            :ref="`video_${index}`"
            @pause="onPause"
            @ended="onEnded"
            v-if="item.adv_type == 2 && index == activeSwipeIndex"
            :src="item.video_url"
            @click.stop="onClick($event, item)"
            controls
            controlslist="nodownload"
          ></video>
          <div class="good-box" v-if="item.adv_type == 2" @click.stop="onClick($event, item)">
            <img :src="item.has_one_goods && item.has_one_goods.thumb" alt="" />
            <p>￥{{ item.has_one_goods && item.has_one_goods.price }}</p>
          </div>
        </van-swipe-item>
      </van-swipe>
    </div>
    <div style="width:32vw;height: 100%;background: #fafafa;">
      <iframe v-if="loading" :src="iframeUrl" frameborder="0" width="100%" height="100%" id="iframebox"></iframe>
      <van-loading v-else  size="60" color="#1989fa" style="margin-top: 50%;"/>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      info: [],
      iframeUrl: "",
      swipeTime: 0,
      isLoop: false,
      loading: false,
      activeSwipeIndex: 0
    };
  },

  created() {
    let initPage = localStorage.getItem("share_path") || "/home";
    if (initPage == "/splitview/index") initPage = "/home";
    this.iframeUrl = this.getShopUrl(initPage, `&big_screen_owner_id=${this.$route.query.big_screen_owner_id}`); //带上机主id
    this.getData();
  },
  beforeDestroy() {
    this.removeIframe();
  },
  methods: {
    async getData() {
      let { msg, result, data } = await $http.get("plugin.big-screen.frontend.slide.index", {}, ".");
      if (result == 0) {
        return this.$toast(msg);
      }
      if (data.list.length == 1) {
        // data.list[0].adv_type = 2;
        this.swipeTime = 0;
        this.isLoop = true;
      }
      // else if (data.list.length > 1) {
      //   this.swipeTime = 1500;
      // }
      this.info = data.list;
      this.loading = true;
      let title = this.fun.getPluginSetting("big_screen.plugin_name", "农优云");
      this.fun.setWXTitle(title);

    },
    onClick(e, item) {
      let iframe = document.getElementById("iframebox");
      iframe.contentWindow.document.write("");
      iframe.contentWindow.document.clear();
      this.loading = false;
      let goodUrl = this.getShopUrl(`/goods/${item.has_one_goods.id}`, `&big_screen_owner_id=${this.$route.query.big_screen_owner_id}`); //带上机主id
      this.iframeUrl = goodUrl;
      this.$nextTick(() => {
        this.loading = true;
      });
    },
    getShopUrl(url, query = "") {
      return this.fun.getSiteRoot() + "/addons/yun_shop/?menu#" + url + "?i=" + this.fun.getKeyByI() + "&mid=" + this.fun.getKeyByMid() + query;
    },
    // 当音频播放
    onPlay() {
      this.swipeTime = 0;
    },
    onPause() {
      this.swipeTime = 3500;
    },
    onEnded() {
      // this.onPause();
      this.info[this.activeSwipeIndex].currentTime = 0;
      this.$refs[`video_${this.activeSwipeIndex}`] && this.$refs[`video_${this.activeSwipeIndex}`][0].pause();
      this.$refs.swipeBox.next();
    },
    onTimeupdate(e) {
      this.info[this.activeSwipeIndex]['currentTime'] = e.target.currentTime;
      this.swipeTime = 0;
    },
    onChange(index) {
      this.activeSwipeIndex = index;
      if (this.info[index].adv_type == 1) this.swipeTime = 1500;
      // if (this.info[index - 1] && this.info[index - 1].adv_type == 2) this.$refs[`video_${index - 1}`] && this.$refs[`video_${index - 1}`][0].pause();
      // if (this.info[index + 1] && this.info[index + 1].adv_type == 2) this.$refs[`video_${index + 1}`] && this.$refs[`video_${index + 1}`][0].pause();
      this.$nextTick(()=>{
        if (this.info[index] && this.info[index].adv_type == 2) {
          this.swipeTime = 0;
          this.$refs[`video_${index}`][0].currentTime = this.info[index].currentTime || 0;
          this.$refs[`video_${index}`] && this.$refs[`video_${index}`][0].play();
          // this.onPlay();
        }
      });

    },
    removeIframe(remove) {
      // 获取iframe元素
      const iframe = document.getElementById("iframebox");

      // 移除iframe元素
      if (iframe) {
        iframe.src = "";
        iframe.contentWindow.document.write("");
        iframe.contentWindow.document.clear();
        iframe.remove();
      }
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
#splitviewIndex {
  width: 100vw;
  height: 100vh;
  font-size: 0;
  background: #000;
  .adPanel {
    overflow: hidden;
    flex: 1;
  }
  .van-swipe {
    img,
    video {
      display: block;
      width: 100%;
      max-height: 100vh;
      object-fit: contain;
    }
  }
  iframe {
    overflow: hidden;
    vertical-align: top;
    vertical-align: text-top(text-bottom);
    ::-webkit-scrollbar {
      display: none;
    }
  }
  .van-swipe-item-custom {
    height: 100vh;
    display: flex;
    align-items: center;
  }
  .good-box {
    position: absolute;
    left: 2rem;
    bottom: 8rem;
    padding: 0.5rem;
    background: #fff;
    border-radius: 1rem;
    box-shadow: 0 0 2px 0px #ccc;
    overflow: hidden;
    img {
      width: 8rem;
      height: 8rem;
      border-radius: 1rem;
    }
    p {
      position: absolute;
      left: 0rem;
      height: 2rem;
      line-height: 2rem;
      bottom: 0rem;
      width: 100%;
      background: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 1rem;
    }
  }
}
</style>
